<template>
  <div>
    <el-row ref="btns" :gutter="10" class="mb8">
      <div class="fl">
        <el-form
          :model="queryParams"
          inline
        >
          <el-form-item label="客户单号" prop="waybillNo">
            <el-input v-model="queryParams.waybillNo"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="query">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="fr">
        <el-col :span="1.5">
          <el-button
            type="warning"
            :loading="exportLoading"
            @click="exports"
          >
            导出
          </el-button>
        </el-col>
      </div>
      <el-table
        v-loading="loading"
        max-heigth="500px"
        :data="orderList"
        border
        show-summary
        :summary-method="summary"
        @selection-change="handleSelectChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="转运批次号"
          prop="serialNumber"
          align="center"
          min-width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="客户单号"
          prop="waybillNo"
          min-width="150"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="系统订单号"
          prop="orderNo"
          min-width="150"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="金额"
          min-width="100"
          prop="amount"
          align="center"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </el-row>
    <div style="border: 0;padding-top: 8px;">
      <el-table v-loading="loading2" :data="orderList2">
        <el-table-column
          v-for="(column, key) in tableHeader2"
          :key="key"
          v-bind="column"
          show-overflow-tooltip
          align="center"
        ></el-table-column>
      </el-table>
      <pagination
        v-show="total2 > 0"
        v-model:page="queryParams2.pageNum"
        v-model:limit="queryParams2.pageSize"
        :total="total2"
        @pagination="getList2"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { list1, list2 } from '@/api/expressManager/zy'
import { tableSum } from '@/utils/index'

const single = ref(true),
  multiple = ref(true),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
const loading = ref(false)

const loading2 = ref(false)
const serNum = ref([])
const idss = ref([])

const queryParams = ref({
  pageSize: 10,
  pageNum: 1,
  waybillNo: '',
  serialNumber: '',
})
const queryParams2 = ref({
  pageSize: 10,
  pageNum: 1,
  waybillNo: '',
})
const tableHeader2 = ref(
  [{ label: '客户单号', prop: 'waybillNo', minWidth: '120px' },
    { label: '箱号', prop: 'caseNumber', minWidth: '160px' },
    { label: '长', prop: 'length', minWidth: '' },
    { label: '宽', prop: 'width', minWidth: '' },
    { label: '高', prop: 'height', minWidth: '' },
    { label: '重', prop: 'weight', minWidth: '' },
    { label: '材积重', prop: 'jweight', minWidth: '' },
    { label: '站点', prop: 'site', minWidth: '' },
    { label: '状态', prop: 'status', minWidth: '' },
    { label: '转运站点', prop: 'transferSite', minWidth: '' },
    { label: '转运时间', prop: 'transportTime', minWidth: '170px' },
    { label: '体积重', prop: 'vweight', minWidth: '' },
    { label: '系统订单号', prop: 'orderNo', minWidth: '120px' }],
)
const { proxy } = getCurrentInstance() as any
const orderList = ref([])
const orderList2 = ref([])
const query = () => {
  queryParams2.value.waybillNo = queryParams.value.waybillNo
  queryParams2.value.pageNum = 1
  queryParams.value.pageNum = 1
  getList()
  getList2()
}
const total = ref(undefined)
const total2 = ref(undefined)
const exportLoading = ref(false)
const exports = () => {
  exportLoading.value = true
  const query = queryParams.value
  $download('order/transfer/detailExport', query, `转运__${ new Date().getTime() }.xlsx`).then(() => {
    exportLoading.value = false
  }).catch(() => {
    exportLoading.value = false
  })
}
const summary = (param) => {
  // eslint-disable-next-line max-len
  const list = ['orderNo', 'waybillNo', 'mainTransferOrderNo', 'transferOrderNo', 'customerName', 'marketProducts', 'splittingStatus', 'receivingSite', 'orderTime', 'consigneePostcode', 'tagNumber', 'goodsType', 'businessManager', 'maker', 'makerDate', 'customsDeclaration', 'remarks', 'printTagCount']
  return tableSum(param, list, proxy.rows)
}
const getList = () => {
  const serNums = proxy.serNum
  loading.value = true

  const data = {
    serialNumber: serNums,
    waybillNo: queryParams.value.waybillNo,
    pageSize: 10,
    pageNum: 1,
  }

  list1(data).then(res => {
    if (res.code == 200) {
      proxy.orderList = res.data
      total.value = res.total
      queryParams.value.serialNumber = serNums
      loading.value = false
    }
  }).catch(err => {
    ElMessage.error(err)
    loading.value = false
  })
}
const getList2 = () => {
  loading2.value = true
  const data1 = {
    id: idsss.value,
    waybillNo: queryParams2.value.waybillNo,
    pageSize: 10,
    pageNum: 1,
  }
  list2(data1).then(res => {
    if (res.code == 200) {
      proxy.orderList2 = res.data
      total2.value = res.total
    }
    loading2.value = false
  }).catch(err => {
    ElMessage.error(err)
    loading2.value = false
  })
}
const init = () => {
  console.log(serNum.value)
  console.log(proxy.serNum)
  if (serNum.value == null) {
    console.log(111)
  } else {
    console.log(1)
  }
}
const ids = ref([])
const orderNos = ref([])
const totalJweight = ref([])
const totalJS = ref([])
const totalSZ = ref([])
const votesNumber = ref([])
const handleSelectChange = (row: { [key: string]: any }) => {
  single.value = row.length != 1
  multiple.value = !row.length
  ids.value = row.map((item) => item.id)
  orderNos.value = row.map((item) => item.orderNo)
  totalJweight.value = row.reduce((total, el) => total + Number(el.receivingTotalCharging), 0)
  totalJS.value = row.reduce((total, el) => total + Number(el.receivingTotal), 0)
  totalSZ.value = row.reduce((total, el) => total + Number(el.receivingTotalWeight), 0)
  votesNumber.value = row.length
}
defineExpose({
  serNum,
  getList,
  getList2,
  init,
  idss, 
})
</script>
<style lang="less" scoped> 
.fl {
  float: left;
}
.fr {
  float: right;
}
</style>